<template>
  <div id="overtimeabsent_container">
    <el-card>
      <div class="overtimeabsent_container_card">
        <div class="paddingOvertimeabsent_container">
          <div class="paddingOvertimeabsent_container2">
            <el-card class="box-card">
              <el-row>
                <el-col :span="12" class="el-col1">
                  <span
                    >&nbsp;&nbsp;累計残業 <span id="overtime_longtime" v-if="jiabanheqianqing.leijijiaban != 0">{{ jiabanheqianqing.leijijiaban }}</span
                    ><span id="overtime_longtime" v-if="jiabanheqianqing.leijijiaban == 0">0.0</span> h</span
                  >
                </el-col>

                <el-col :span="12">
                  <span
                    >&nbsp;&nbsp;累計欠勤 <span id="leave_longtime" style="color: red" v-if="jiabanheqianqing.leijiqianqing != 0">{{ jiabanheqianqing.leijiqianqing }}</span
                    ><span id="leave_longtime" style="color: red" v-if="jiabanheqianqing.leijiqianqing == 0">0.0</span> h</span
                  >
                </el-col>
              </el-row>
            </el-card>
          </div>
          <div class="marginDateBox">
            <div class="datebox">
              <div class="box" v-for="(item, index) in arr" :key="index">
                {{ item }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="searchDiv">
        <div class="searchDivLeft">
          累計欠勤期間:
          <el-date-picker v-model="value2" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange" align="left" range-separator="-" start-placeholder="開始期日" end-placeholder="終了期日">
          </el-date-picker>
          &nbsp;&nbsp;残業/休暇:
          <el-select v-model="overtimeabsent.searchbean.oliFlag" clearable placeholder="を選んでください">
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          &nbsp;&nbsp;承認状態:
          <el-select v-model="overtimeabsent.searchbean.verifiedState" clearable placeholder="を選んでください">
            <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          &nbsp;&nbsp;
          <el-button type="primary" v-preventReClick icon="el-icon-search" @click="getOvertimeAbsentItem">検索 </el-button>
        </div>
        <div class="searchDivRight">
          <el-button type="primary" v-preventReClick icon="el-icon-plus" @click="openAddDialog">新規</el-button>
          <el-button type="warning" v-preventReClick icon="el-icon-edit" @click="addEdit">修正</el-button>
          <el-button type="danger" v-preventReClick icon="el-icon-delete" @click="remove">削除</el-button>
        </div>
      </div>
      <!-- 绑定表格数据 -->
      <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ background: '#f2f2f2', color: '#606266' }" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="oliFlag" label="類別"> </el-table-column>
        <!-- <el-table-column prop="aaa" label="类型" width="180">
                </el-table-column> -->
        <el-table-column prop="beginTime" label="開始時間"> </el-table-column>
        <el-table-column prop="endTime" label="終了時間"> </el-table-column>
        <el-table-column prop="totalTimes" label="時間(h)"> </el-table-column>
        <el-table-column prop="oliReason" label="理由"> </el-table-column>
        <el-table-column prop="verifiedState" label="承認状態"> </el-table-column>
        <el-table-column prop="verifiedUserName" label="承認者"> </el-table-column>
        <el-table-column prop="verifiedTime" label="承認時間"> </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="overtimeabsent.indexPage"
        :page-size="overtimeabsent.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 添加用户的对话框 -->
    <el-dialog title="新規残業欠勤" v-model="addDialogVisible" width="700px" custom-class="diaOvertime" @close="reset()">
      <!-- 内容主题区域 -->
      <!-- 底部区域 -->
      <el-form ref="addFormRef" :model="addFormtijiao" label-width="100px">
        <div class="formcontent">
          <!-- 加班/请假 -->
          <!-- prop指验证规则的属性名 -->
          <el-form-item label="残業・休暇" prop="">
            <div style="text-align: left">
              <el-radio v-model="addFormtijiao.oliFlag" label="1" @click="resetData">残業</el-radio>
              <el-radio v-model="addFormtijiao.oliFlag" label="2" @click="resetData">休暇</el-radio>
            </div>
          </el-form-item>
          <!-- 当radio为加班时 -->
          <div v-if="addFormtijiao.oliFlag == '1'" class="divridio">
            <!-- 开始日期和开始时间 -->
            <div>
              <div style="float: left">
                <el-form-item label="開始期日">
                  <div style="text-align: left">
                    <el-date-picker v-model="addFormtijiao.beginTime" type="date" placeholder=" " format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="divTime"> </el-date-picker>
                  </div>
                </el-form-item>
              </div>
              <div style="float: right">
                <el-form-item label="開始時間">
                  <div style="text-align: left">
                    <el-time-select v-model="addForm.startTime" placeholder=" " start="00:00" step="00:30" end="24:00" format="HH:mm" value-format="HH:mm" class="timeselect" @change="divTime">
                    </el-time-select>
                  </div>
                </el-form-item>
              </div>
            </div>

            <!-- 结束日期和结束时间 -->
            <div>
              <div style="float: left">
                <el-form-item label="終了期日">
                  <div style="text-align: left">
                    <el-date-picker v-model="addFormtijiao.endTime" type="date" placeholder=" " format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="divTime"> </el-date-picker>
                  </div>
                </el-form-item>
              </div>

              <div style="float: right">
                <el-form-item label="終了時間">
                  <div style="text-align: left">
                    <el-time-select v-model="addForm.terminalTime" placeholder=" " start="00:00" step="00:30" end="24:00" @change="divTime" format="HH:mm" value-format="HH:mm" class="timeselect">
                    </el-time-select>
                  </div>
                </el-form-item>
              </div>
            </div>
            <!-- 合计小时数 -->
            <div>
              <div style="float: left; width: 100%">
                <el-form-item label="時間数合計">
                  <div style="text-align: left; width: 100%">
                    <el-input style="width: 100%" v-model="addFormtijiao.totalTimes" disabled> </el-input>
                  </div>
                </el-form-item>
              </div>
            </div>
            <!-- 理由 -->
            <div>
              <div style="float: left; width: 100%">
                <el-form-item label="理由">
                  <div style="text-align: left; width: 100%">
                    <el-input maxlength="250" type="textarea" :rows="2" placeholder=" " v-model="addFormtijiao.oliReason"> </el-input>
                  </div>
                </el-form-item>
              </div>
            </div>
          </div>

          <!-- 当radio为请假时 -->
          <div v-if="addFormtijiao.oliFlag == '2'" class="divridio">
            <div>
              <!-- 请假类型 -->
              <div>
                <div style="float: left">
                  <el-form-item label="休暇類別">
                    <div style="text-align: left">
                      <el-select v-model="addFormtijiao.leaveType" placeholder=" " class="leaveselect" ref="fieldSelect">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                      </el-select>
                    </div>
                  </el-form-item>
                </div>
                &nbsp;
                <el-button type="primary" @click="qingjialeixingfangfa">休暇類別を見ます</el-button>
              </div>
              <!-- 开始日期和开始时间 -->
              <div>
                <div style="float: left">
                  <el-form-item label="開始期日">
                    <div style="text-align: left">
                      <el-date-picker v-model="addFormtijiao.beginTime" type="date" placeholder=" " format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="endTimebianji"> </el-date-picker>
                    </div>
                  </el-form-item>
                </div>
                <div style="float: right">
                  <el-form-item label="開始時間">
                    <div style="text-align: left">
                      <el-time-select v-model="addForm.startTime" placeholder=" " start="00:00" step="00:30" end="24:00" class="timeselect"> </el-time-select>
                    </div>
                  </el-form-item>
                </div>
              </div>

              <!-- 结束日期和结束时间 -->
              <div>
                <div style="float: left">
                  <el-form-item label="終了期日">
                    <div style="text-align: left">
                      <el-date-picker v-model="addFormtijiao.endTime" type="date" placeholder=" " format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="chongzhishijian"> </el-date-picker>
                    </div>
                  </el-form-item>
                </div>

                <div style="float: right">
                  <el-form-item label="終了時間">
                    <div style="text-align: left">
                      <el-time-select v-model="addForm.terminalTime" placeholder=" " start="00:00" step="00:30" end="24:00" @change="divTime" class="timeselect"> </el-time-select>
                    </div>
                  </el-form-item>
                </div>
              </div>
              <!-- 合计小时数 -->
              <div>
                <div style="float: left; width: 100%">
                  <el-form-item label="時間数合計">
                    <div style="text-align: left; width: 100%">
                      <el-input style="width: 100%" v-model="addFormtijiao.totalTimes" disabled> </el-input>
                    </div>
                  </el-form-item>
                </div>
              </div>
              <!-- 理由 -->
              <div>
                <div style="float: left; width: 100%">
                  <el-form-item label="理由">
                    <div style="text-align: left; width: 100%">
                      <el-input maxlength="250" type="textarea" :rows="2" placeholder=" " v-model="addFormtijiao.oliReason"> </el-input>
                    </div>
                  </el-form-item>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>

      <!-- 请假类型弹出框 -->
      <el-dialog width="40%" title="休暇設置詳細" v-model="innerVisible" append-to-body>
        <table class="mytable" cellpadding="0" cellspacing="0" :model="qingjia" :rules="rules" align="center" border="1px">
          <colgroup>
            <col style="width: 10%" />
            <col style="width: 30%" />
          </colgroup>
          <tr class="mytr">
            <td>休暇類別</td>
            <td>
              {{ qingjia.input }}
            </td>
          </tr>
          <tr class="mytr">
            <td>正常出勤か否か</td>
            <td>
              <el-radio disabled v-model="qingjia.radio" label="禁用">はい</el-radio>
              <el-radio disabled v-model="qingjia.radio" label="选中且禁用">いいえ</el-radio>
            </td>
          </tr>
          <tr class="mytr">
            <td>最大限休暇日数</td>
            <td>
              {{ qingjia.input1 }}
            </td>
          </tr>
          <tr class="mytr">
            <td>毎月休暇時間制限するか否か</td>
            <td>
              <el-radio disabled v-model="qingjia.radio1" label="禁用">はい</el-radio>
              <el-radio disabled v-model="qingjia.radio1" label="选中且禁用">いいえ</el-radio>
            </td>
          </tr>
          <tr class="mytr">
            <td>毎月休暇時間(h)</td>
            <td>
              {{ qingjia.input2 }}
            </td>
          </tr>
          <tr class="mytr">
            <td>毎年休暇時間制限するか否か</td>
            <td>
              <el-radio disabled v-model="qingjia.radio2" label="禁用">はい</el-radio>
              <el-radio disabled v-model="qingjia.radio2" label="选中且禁用">いいえ</el-radio>
            </td>
          </tr>
          <tr class="mytr">
            <td>毎年休暇時間(h)</td>
            <td>
              {{ qingjia.input3 }}
            </td>
          </tr>
          <tr class="mytr">
            <td>一日休暇制限するか否か</td>
            <td>
              <el-radio disabled v-model="qingjia.radio3" label="禁用">はい</el-radio>
              <el-radio disabled v-model="qingjia.radio3" label="选中且禁用">いいえ</el-radio>
            </td>
          </tr>
          <tr class="mytr">
            <td>貸し越し休暇できるか否か</td>
            <td>
              <el-radio disabled v-model="qingjia.radio4" label="禁用">はい</el-radio>
              <el-radio disabled v-model="qingjia.radio4" label="选中且禁用">いいえ</el-radio>
            </td>
          </tr>
          <tr class="mytr">
            <td>休暇開始時間</td>
            <td>
              {{ qingjia.input4 }}
            </td>
          </tr>
          <tr class="mytr">
            <td>休暇終了時間</td>
            <td>
              {{ qingjia.input5 }}
            </td>
          </tr>
          <tr class="mytr">
            <td>毎日休暇最長時間(h)</td>
            <td>
              {{ qingjia.input6 }}
            </td>
          </tr>
          <tr class="mytr">
            <td>土日を含めるか否か</td>
            <td>
              <el-radio disabled v-model="qingjia.radio5" label="禁用">はい</el-radio>
              <el-radio disabled v-model="qingjia.radio5" label="选中且禁用">いいえ</el-radio>
            </td>
          </tr>
          <tr class="mytr">
            <td>祝日を含めるか否か</td>
            <td>
              <el-radio disabled v-model="qingjia.radio6" label="禁用">はい</el-radio>
              <el-radio disabled v-model="qingjia.radio6" label="选中且禁用">いいえ</el-radio>
            </td>
          </tr>
          <tr class="mytr" v-if="qingjia.lsOvertimeSeting === '1'">
            <td>除いた残業類別</td>
            <td>
              <el-radio disabled v-model="qingjia.radio7" label="1">有給休暇</el-radio>
              <el-radio disabled v-model="qingjia.radio7" label="2">福祉休暇</el-radio>
              <el-radio disabled v-model="qingjia.radio7" label="3">去年の残り</el-radio>
            </td>
          </tr>
          <tr class="mytr" v-if="qingjia.lsOvertimeSeting === '2'">
            <td>除いた残業類別1</td>
            <td>
              <el-radio disabled v-model="qingjia.radio7" label="1">有給休暇</el-radio>
              <el-radio disabled v-model="qingjia.radio7" label="2">福祉休暇</el-radio>
              <el-radio disabled v-model="qingjia.radio7" label="3">去年の残り</el-radio>
            </td>
          </tr>
          <tr class="mytr" v-if="qingjia.lsOvertimeSeting === '2'">
            <td>除いた残業類別2</td>
            <td>
              <el-radio disabled v-model="qingjia.radio8" label="1">有給休暇</el-radio>
              <el-radio disabled v-model="qingjia.radio8" label="2">福祉休暇</el-radio>
              <el-radio disabled v-model="qingjia.radio8" label="3">去年の残り</el-radio>
            </td>
          </tr>
          <tr class="mytr" v-if="qingjia.lsOvertimeSeting === '2'">
            <td>除いた残業類別3</td>
            <td>
              <el-radio disabled v-model="qingjia.radio9" label="1">有給休暇</el-radio>
              <el-radio disabled v-model="qingjia.radio9" label="2">福祉休暇</el-radio>
              <el-radio disabled v-model="qingjia.radio9" label="3">去年の残り</el-radio>
            </td>
          </tr>
        </table>
      </el-dialog>

      <!-- 点击取消和确定都会隐藏对话框 -->
      <div style="text-align: center">
        <el-button type="primary" @click="saveovertimeleaveinfo" icon="el-icon-circle-check" v-preventReClick>保存</el-button>
      </div>
    </el-dialog>

    <!-- 编辑用户的对话框 -->
    <el-dialog title="残業欠勤編集" v-model="addDialogVisible1" width="700px" @close="reset()" custom-class="diaOvertime">
      <!-- 内容主题区域 -->
      <!-- 底部区域 -->
      <el-form ref="" :model="editFormtijiao" label-width="100px">
        <div class="formcontent">
          <!-- 加班/请假 -->
          <!-- prop指验证规则的属性名 -->
          <el-form-item label="残業・休暇" prop="">
            <div style="text-align: left">
              <el-radio v-model="editFormtijiao.oliFlag" label="1" :disabled="editFormtijiao.oliFlag === '2' ? true : false">残業</el-radio>
              <el-radio v-model="editFormtijiao.oliFlag" label="2" :disabled="editFormtijiao.oliFlag === '1' ? true : false">休暇</el-radio>
            </div>
          </el-form-item>
          <!-- 当radio为加班时 -->
          <div v-if="editFormtijiao.oliFlag == '1'" class="divridio">
            <!-- 开始日期和开始时间 -->
            <div>
              <div style="float: left">
                <el-form-item label="開始期日">
                  <div style="text-align: left">
                    <el-date-picker v-model="editFormtijiao.beginTime" type="date" placeholder="選択してください" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="divTimebianji">
                    </el-date-picker>
                  </div>
                </el-form-item>
              </div>
              <div style="float: right">
                <el-form-item label="開始時間">
                  <div style="text-align: left">
                    <el-time-select placeholder="選択してください" v-model="editForm.startTime" start="00:00" step="00:30" end="24:00" class="timeselect" @change="divTimebianji"> </el-time-select>
                  </div>
                </el-form-item>
              </div>
            </div>

            <!-- 结束日期和结束时间 -->
            <div>
              <div style="float: left">
                <el-form-item label="終了期日">
                  <div style="text-align: left">
                    <el-date-picker v-model="editFormtijiao.endTime" type="date" placeholder="選択してください" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="divTimebianji"> </el-date-picker>
                  </div>
                </el-form-item>
              </div>

              <div style="float: right">
                <el-form-item label="終了時間">
                  <div style="text-align: left">
                    <el-time-select placeholder="選択してください" v-model="editForm.terminalTime" start="00:00" step="00:30" end="24:00" @change="divTimebianji" class="timeselect"> </el-time-select>
                  </div>
                </el-form-item>
              </div>
            </div>
            <!-- 合计小时数 -->
            <div>
              <div style="float: left; width: 100%">
                <el-form-item label="合計時間数">
                  <div style="text-align: left; width: 100%">
                    <el-input style="width: 100%" v-model="editFormtijiao.totalTimes" :disabled="true"> </el-input>
                  </div>
                </el-form-item>
              </div>
            </div>
            <!-- 理由 -->
            <div>
              <div style="float: left; width: 100%">
                <el-form-item label="理由">
                  <div style="text-align: left; width: 100%">
                    <el-input maxlength="250" type="textarea" :rows="2" placeholder="入力してください" v-model="editFormtijiao.oliReason"> </el-input>
                  </div>
                </el-form-item>
              </div>
            </div>
          </div>

          <!-- 当radio为请假时 -->
          <div v-if="editFormtijiao.oliFlag == '2'" class="divridio">
            <div>
              <!-- 请假类型 -->
              <div>
                <div style="float: left">
                  <el-form-item label="休暇類別">
                    <div style="text-align: left">
                      <el-select v-model="editFormtijiao.leaveType" placeholder="選択してください" class="leaveselect" ref="fieldSelect">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                      </el-select>
                    </div>
                  </el-form-item>
                </div>
                &nbsp;
                <el-button type="primary" @click="qingjiaxiangqingbianji">休暇類別を見ます</el-button>
              </div>
              <!-- 开始日期和开始时间 -->
              <div>
                <div style="float: left">
                  <el-form-item label="開始期日">
                    <div style="text-align: left">
                      <el-date-picker v-model="editFormtijiao.beginTime" type="date" placeholder="選択してください" @change="divTimebianji"> </el-date-picker>
                    </div>
                  </el-form-item>
                </div>
                <div style="float: right">
                  <el-form-item label="開始時間">
                    <div style="text-align: left">
                      <el-time-select placeholder="選択してください" v-model="editForm.startTime" start="00:00" step="00:30" end="24:00" class="timeselect" @change="divTimebianji"> </el-time-select>
                    </div>
                  </el-form-item>
                </div>
              </div>

              <!-- 结束日期和结束时间 -->
              <div>
                <div style="float: left">
                  <el-form-item label="終了期日">
                    <div style="text-align: left">
                      <el-date-picker v-model="editFormtijiao.endTime" type="date" placeholder="選択してください" @change="divTimebianji"> </el-date-picker>
                    </div>
                  </el-form-item>
                </div>

                <div style="float: right">
                  <el-form-item label="終了時間">
                    <div style="text-align: left">
                      <el-time-select placeholder="選択してください" v-model="editForm.terminalTime" start="00:00" step="00:30" end="24:00" @change="divTimebianji" class="timeselect">
                      </el-time-select>
                    </div>
                  </el-form-item>
                </div>
              </div>
              <!-- 合计小时数 -->
              <div>
                <div style="float: left; width: 100%">
                  <el-form-item label="合計時間数">
                    <div style="text-align: left; width: 100%">
                      <el-input style="width: 100%" v-model="editFormtijiao.totalTimes" :disabled="true"> </el-input>
                    </div>
                  </el-form-item>
                </div>
              </div>
              <!-- 理由 -->
              <div>
                <div style="float: left; width: 100%">
                  <el-form-item label="理由">
                    <div style="text-align: left; width: 100%">
                      <el-input maxlength="250" type="textarea" :rows="2" placeholder="入力してください" v-model="editFormtijiao.oliReason"> </el-input>
                    </div>
                  </el-form-item>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>

      <!-- 请假类型弹出框 -->
      <el-dialog width="40%" title="休暇設置詳細" v-model="innerVisible5" append-to-body>
        <table class="mytable" cellpadding="0" cellspacing="0" :model="qingjia" :rules="rules" align="center" border="1px">
          <tr class="mytr">
            <td>休暇類別</td>
            <td>
              {{ qingjia.input }}
            </td>
          </tr>
          <tr class="mytr">
            <td>正常出勤か否か</td>
            <td>
              <el-radio disabled v-model="qingjia.radio" label="禁用">はい</el-radio>
              <el-radio disabled v-model="qingjia.radio" label="选中且禁用">いいえ</el-radio>
            </td>
          </tr>
          <tr class="mytr">
            <td>最大限休暇日数</td>
            <td>
              {{ qingjia.input1 }}
            </td>
          </tr>
          <tr class="mytr">
            <td>毎月休暇時間制限するか否か</td>
            <td>
              <el-radio disabled v-model="qingjia.radio1" label="禁用">はい</el-radio>
              <el-radio disabled v-model="qingjia.radio1" label="选中且禁用">いいえ</el-radio>
            </td>
          </tr>
          <tr class="mytr">
            <td>毎月休暇時間(h)</td>
            <td>
              {{ qingjia.input2 }}
            </td>
          </tr>
          <tr class="mytr">
            <td>毎年休暇時間制限するか否か</td>
            <td>
              <el-radio disabled v-model="qingjia.radio2" label="禁用">はい</el-radio>
              <el-radio disabled v-model="qingjia.radio2" label="选中且禁用">いいえ</el-radio>
            </td>
          </tr>
          <tr class="mytr">
            <td>毎年休暇時間(h)</td>
            <td>
              {{ qingjia.input3 }}
            </td>
          </tr>
          <tr class="mytr">
            <td>一日休暇制限するか否か</td>
            <td>
              <el-radio disabled v-model="qingjia.radio3" label="禁用">はい</el-radio>
              <el-radio disabled v-model="qingjia.radio3" label="选中且禁用">いいえ</el-radio>
            </td>
          </tr>
          <tr class="mytr">
            <td>貸し越し休暇できるか否か</td>
            <td>
              <el-radio disabled v-model="qingjia.radio4" label="禁用">はい</el-radio>
              <el-radio disabled v-model="qingjia.radio4" label="选中且禁用">いいえ</el-radio>
            </td>
          </tr>
          <tr class="mytr">
            <td>休暇開始時間</td>
            <td>
              {{ qingjia.input4 }}
            </td>
          </tr>
          <tr class="mytr">
            <td>休暇終了時間</td>
            <td>
              {{ qingjia.input5 }}
            </td>
          </tr>
          <tr class="mytr">
            <td>毎日休暇最長時間(h)</td>
            <td>
              {{ qingjia.input6 }}
            </td>
          </tr>
          <tr class="mytr">
            <td>土日を含めるか否か</td>
            <td>
              <el-radio disabled v-model="qingjia.radio5" label="禁用">はい</el-radio>
              <el-radio disabled v-model="qingjia.radio5" label="选中且禁用">いいえ</el-radio>
            </td>
          </tr>
          <tr class="mytr">
            <td>祝日を含めるか否か</td>
            <td>
              <el-radio disabled v-model="qingjia.radio6" label="禁用">はい</el-radio>
              <el-radio disabled v-model="qingjia.radio6" label="选中且禁用">いいえ</el-radio>
            </td>
          </tr>
          <tr class="mytr" v-if="qingjia.lsOvertimeSeting === '1'">
            <td>扣除加班类型选择</td>
            <td>
              <el-radio disabled v-model="qingjia.radio7" label="1">有給休暇</el-radio>
              <el-radio disabled v-model="qingjia.radio7" label="2">福祉休暇</el-radio>
              <el-radio disabled v-model="qingjia.radio7" label="3">去年の残り</el-radio>
            </td>
          </tr>
          <tr class="mytr" v-if="qingjia.lsOvertimeSeting === '2'">
            <td>除いた残業類別1</td>
            <td>
              <el-radio disabled v-model="qingjia.radio7" label="1">有給休暇</el-radio>
              <el-radio disabled v-model="qingjia.radio7" label="2">福祉休暇</el-radio>
              <el-radio disabled v-model="qingjia.radio7" label="3">去年の残り</el-radio>
            </td>
          </tr>
          <tr class="mytr" v-if="qingjia.lsOvertimeSeting === '2'">
            <td>除いた残業類別2</td>
            <td>
              <el-radio disabled v-model="qingjia.radio8" label="1">有給休暇</el-radio>
              <el-radio disabled v-model="qingjia.radio8" label="2">福祉休暇</el-radio>
              <el-radio disabled v-model="qingjia.radio8" label="3">去年の残り</el-radio>
            </td>
          </tr>
          <tr class="mytr" v-if="qingjia.lsOvertimeSeting === '2'">
            <td>除いた残業類別3</td>
            <td>
              <el-radio disabled v-model="qingjia.radio9" label="1">有給休暇</el-radio>
              <el-radio disabled v-model="qingjia.radio9" label="2">福祉休暇</el-radio>
              <el-radio disabled v-model="qingjia.radio9" label="3">去年の残り</el-radio>
            </td>
          </tr>
        </table>
      </el-dialog>

      <!-- 点击取消和确定都会隐藏对话框 -->
      <div style="text-align: center">
        <el-button type="primary" @click="updata" icon="el-icon-circle-check" v-preventReClick>保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
export default {
  data() {
    return {
      //请假详情传值
      qingjiachuanzhi: {
        indexPage: 1,
        pageSize: 10000,
        searchbean: {
          groupEnterpriseGuid: this.$store.getters.showentergroup,
          lsName: ''
        }
      },
      //累计加班和累计欠勤
      tongji: {
        olsYear: '',
        userGuid: this.$store.getters.showuserGuid,
        groupEnterpriseGuid: this.$store.getters.showentergroup
      },
      jiabanheqianqing: {
        leijijiaban: '',
        leijiqianqing: ''
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一週',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一か月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三か月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      //加班或者请假
      // value1: '',
      // 日期时间
      value2: '',
      options1: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '1',
          label: '残業'
        },
        {
          value: '2',
          label: '休暇'
        }
      ],
      options5: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '0',
          label: '承認待ち'
        },
        {
          value: '1',
          label: '承認済み'
        },
        {
          value: '2',
          label: '承認拒否'
        }
      ],
      // 审核状态
      // value5: '',

      // 残業・欠勤検索情報を入手する
      overtimeabsent: {
        searchbean: {
          userGuid: this.$store.getters.showuserGuid,
          groupEnterpriseGuid: this.$store.getters.showentergroup,
          beginTime: '',
          endTime: '',
          oliFlag: '',
          verifiedState: '',
          flg: '1'
        },
        indexPage: 1,
        pageSize: 8
      },

      //   獲取過來的表格數組
      tableData: [],
      total: 0,
      multipleSelection: [],
      //   控制添加用户对话框的显示与隐藏
      addDialogVisible: false,
      //   控制编辑用户对话框的显示与隐藏
      addDialogVisible1: false,
      // 添加加班欠勤的提交的数据COPY
      // addFormCopy: {},
      // 添加小组的提交的数据
      addFormtijiao: {
        beginTime: '',
        endTime: '',
        groupEnterpriseGuid: this.$store.getters.showentergroup, //企业主键
        leaveOvertimeType: '',
        leaveType: '', //请假类型
        oliFeeFlg: '0',
        oliFeeMultiple: '1.5', //加班费结算倍数
        oliFeeTimes: '0',
        oliFlag: '1', //加班/请假
        oliReason: '', //理由
        overtimeType: '1', //加班类型
        totalTimes: '', //合计小时数
        userGuid: this.$store.getters.showuserGuid //用户id
      },
      //   添加用户的表单数据
      addForm: {
        startTime: '',
        terminalTime: ''
      },
      // 编辑小组的提交的数据
      editFormtijiao: {
        oliGuid: '',
        beginTime: '',
        endTime: '',
        leaveOvertimeType: '',
        leaveType: '事假',
        oliFeeFlg: '0',
        oliFeeMultiple: '1.5',
        oliFeeTimes: '0',
        oliFlag: '',
        oliReason: '',
        overtimeType: '1',
        totalTimes: ''
      },
      //   编辑用户的表单数据
      editForm: {
        startTime: '',
        terminalTime: ''
      },
      options2: [],
      value3: '',
      // 刪除數據id數組
      removeID: { oliGuids: [] },
      //id
      id: {
        oliGuid: ''
      },
      // 请假类型弹出框
      innerVisible: false,
      innerVisible5: false,
      // 请假类型表格数据
      qingjia: {
        // 请假名称
        input: '',
        // 是否算正常出勤
        radio: '',
        // 最长请假天数
        input1: '',
        //是否限制每月请假时长
        radio1: '',
        //每月请假时长(小时)
        input2: '',
        //是否限制每年请假时长
        radio2: '',
        //每年请假时长(小时)
        input3: '',
        //是否限制整天请假
        radio3: '',
        //是否可透支请假
        radio4: '',
        //请假开始时间
        input4: '',
        //请假结束时间
        input5: '',
        //每天请假最大时长(小时)
        input6: '',
        //是否计算周六周日
        radio5: '',
        //是否计算法定节假日
        lsOvertimeSeting: '',
        radio6: '',
        radio7: '',
        radio8: '',
        radio9: ''
      }
    }
  },

  methods: {
    //请假类型方法
    qingjialeixingfangfa() {
      if (this.addFormtijiao.leaveType == '') {
        return this.$message.warning('休暇類別をご選んでください')
      } else {
        this.qingjiaxiangqing()
        this.innerVisible = true
      }
    },
    //获取请假类型详情
    qingjiaxiangqing() {
      this.options2.forEach((item) => {
        if (item.value === this.addFormtijiao.leaveType) {
          this.qingjiachuanzhi.searchbean.lsName = item.label
          return
        }
      })
      this.axios
        .post('/leavesetting/select/list', this.qingjiachuanzhi)
        .then((res) => {
          console.log(res)
          var list = res.data.data.list
          this.qingjia.input = list[0].lsName
          if (list[0].lsFlg == '1') {
            this.qingjia.radio = '禁用'
          } else {
            this.qingjia.radio = '选中且禁用'
          }
          this.qingjia.input1 = list[0].lsDayno
          if (list[0].lsMonthFlg == '1') {
            this.qingjia.radio1 = '禁用'
          } else {
            this.qingjia.radio1 = '选中且禁用'
          }
          this.qingjia.input2 = list[0].lsMonthLong
          if (list[0].lsYearFlg == '1') {
            this.qingjia.radio2 = '禁用'
          } else {
            this.qingjia.radio2 = '选中且禁用'
          }
          this.qingjia.input3 = list[0].lsYearLong
          if (list[0].lsAlldayFlg == '1') {
            this.qingjia.radio3 = '禁用'
          } else {
            this.qingjia.radio3 = '选中且禁用'
          }
          if (list[0].lsOverdraftFlg == '1') {
            this.qingjia.radio4 = '禁用'
          } else {
            this.qingjia.radio4 = '选中且禁用'
          }
          this.qingjia.input4 = list[0].lsBtime.slice(11, 16)
          this.qingjia.input5 = list[0].lsEtime.slice(11, 16)
          this.qingjia.input6 = list[0].lsLong
          if (list[0].lsLeaveFlg1 == '1') {
            this.qingjia.radio5 = '禁用'
          } else {
            this.qingjia.radio5 = '选中且禁用'
          }
          if (list[0].lsLeaveFlg2 == '1') {
            this.qingjia.radio6 = '禁用'
          } else {
            this.qingjia.radio6 = '选中且禁用'
          }
          this.qingjia.lsOvertimeSeting = list[0].lsOvertimeSeting
          this.qingjia.radio7 = list[0].lsOvertimeType1
          this.qingjia.radio8 = list[0].lsOvertimeType2
          this.qingjia.radio9 = list[0].lsOvertimeType3
        })
        .catch((error) => {
          console.log(error)
        })
    },

    qingjiaxiangqingbianji() {
      this.innerVisible5 = true
      this.options2.forEach((item) => {
        if (item.value === this.editFormtijiao.leaveType) {
          this.qingjiachuanzhi.searchbean.lsName = item.label
          return
        }
      })
      this.axios
        .post('/leavesetting/select/list', this.qingjiachuanzhi)
        .then((res) => {
          console.log(res)
          var list = res.data.data.list
          this.qingjia.input = list[0].lsName
          if (list[0].lsFlg == '1') {
            this.qingjia.radio = '禁用'
          } else {
            this.qingjia.radio = '选中且禁用'
          }
          this.qingjia.input1 = list[0].lsDayno
          if (list[0].lsMonthFlg == '1') {
            this.qingjia.radio1 = '禁用'
          } else {
            this.qingjia.radio1 = '选中且禁用'
          }
          this.qingjia.input2 = list[0].lsMonthLong
          if (list[0].lsYearFlg == '1') {
            this.qingjia.radio2 = '禁用'
          } else {
            this.qingjia.radio2 = '选中且禁用'
          }
          this.qingjia.input3 = list[0].lsYearLong
          if (list[0].lsAlldayFlg == '1') {
            this.qingjia.radio3 = '禁用'
          } else {
            this.qingjia.radio3 = '选中且禁用'
          }
          if (list[0].lsOverdraftFlg == '1') {
            this.qingjia.radio4 = '禁用'
          } else {
            this.qingjia.radio4 = '选中且禁用'
          }
          this.qingjia.input4 = list[0].lsBtime.slice(11, 16)
          this.qingjia.input5 = list[0].lsEtime.slice(11, 16)
          this.qingjia.input6 = list[0].lsLong
          if (list[0].lsLeaveFlg1 == '1') {
            this.qingjia.radio5 = '禁用'
          } else {
            this.qingjia.radio5 = '选中且禁用'
          }
          if (list[0].lsLeaveFlg2 == '1') {
            this.qingjia.radio6 = '禁用'
          } else {
            this.qingjia.radio6 = '选中且禁用'
          }
          this.qingjia.lsOvertimeSeting = list[0].lsOvertimeSeting
          this.qingjia.radio7 = list[0].lsOvertimeType1
          this.qingjia.radio8 = list[0].lsOvertimeType2
          this.qingjia.radio9 = list[0].lsOvertimeType3
        })
        .catch((error) => {
          console.log(error)
        })
    },
    //获取请假类型
    qingjialeixing() {
      function shuzu(value, label) {
        this.value = value
        this.label = label
      }
      this.options2 = []
      this.axios
        .post('/leavesetting/select/list', this.qingjiachuanzhi)
        .then((res) => {
          var list = res.data.data.list
          for (var i = 0; i < list.length; i++) {
            this.options2.push(new shuzu(list[i].lsGuid, list[i].lsName))
          }
          console.log(this.options2)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.overtimeabsent.pageSize = newSize
      this.getOvertimeAbsentItem()
    },

    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      // console.log(newPage)
      this.overtimeabsent.indexPage = newPage
      this.getOvertimeAbsentItem()
    },

    add() {
      var num = new Date().getFullYear().toString()
      var array = num.split('')
      this.arr = array
      console.log(this.arr)
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
      // console.log(this.multipleSelection)
    },

    //累计加班和累计欠勤
    getovertimeLongtimeandleaveLongtime() {
      this.tongji.olsYear = this.arr.join('')
      console.log(this.tongji)
      this.axios
        .post('/overtimeleavestatistics/select', this.tongji)
        .then((res) => {
          if (res.data.data.length === 0) return
          this.jiabanheqianqing.leijijiaban = res.data.data.overtimeLongtime
          this.jiabanheqianqing.leijiqianqing = res.data.data.leaveLongtime
        })
        .catch((error) => {
          console.log(error)
        })
    },
    addDate(date, days) {
      let d = new Date(date)
      d.setDate(d.getDate() + days)
      let m = d.getMonth() + 1
      return d.getFullYear() + '-' + m + '-' + d.getDate()
    },
    // 分頁查詢數據
    getOvertimeAbsentItem() {
      // 获取加班欠勤全部数据
      console.log(this.value2)
      if (this.value2 != null) {
        this.overtimeabsent.searchbean.beginTime = this.value2[0]
        // console.log(this.overtimeabsent.searchbean.beginTime)
        this.overtimeabsent.searchbean.endTime = this.value2[1]
        // console.log(this.value2.length)
      } else if (this.value2 == null) {
        this.overtimeabsent.searchbean.beginTime = ''
        this.overtimeabsent.searchbean.endTime = ''
      }
      console.log(this.overtimeabsent)
      this.axios
        .post('/overtimeleaveinfo/select/list', this.overtimeabsent)
        .then((res) => {
          console.log(res)
          this.add()
          this.qingjialeixing()
          this.getovertimeLongtimeandleaveLongtime()
          this.tableData = res.data.data.list
          for (var i = 0; i < this.tableData.length; i++) {
            this.tableData[i].beginTime = this.tableData[i].beginTime.substring(0, 16)
            this.tableData[i].endTime = this.tableData[i].endTime.substring(0, 16)
            if (this.tableData[i].oliFlag === '1') {
              this.tableData[i].oliFlag = '残業'
              if (this.tableData[i].overtimeType === '1') {
                this.tableData[i].overtimeType = '普通残業'
              }
              if (this.tableData[i].overtimeType === '2') {
                this.tableData[i].overtimeType = '週末残業'
              }
              if (this.tableData[i].overtimeType === '3') {
                this.tableData[i].overtimeType = '休日残業'
              }
              if (this.tableData[i].overtimeType === '4') {
                this.tableData[i].overtimeType = '有給休暇'
              }
              if (this.tableData[i].overtimeType === '5') {
                this.tableData[i].overtimeType = '福祉休暇'
              }
              if (this.tableData[i].overtimeType === '6') {
                this.tableData[i].overtimeType = '去年残り休暇'
              }

              this.tableData[i].aaa = this.tableData[i].overtimeType
            }
            if (this.tableData[i].oliFlag === '2') {
              this.tableData[i].oliFlag = '休暇'
              if (this.tableData[i].leaveType === '1') {
                this.tableData[i].leaveType = '事假'
              }
              if (this.tableData[i].leaveType === '2') {
                this.tableData[i].leaveType = '陪产假'
              }
              if (this.tableData[i].leaveType === '3') {
                this.tableData[i].leaveType = '调休'
              }
              if (this.tableData[i].leaveType === '4') {
                this.tableData[i].leaveType = '丧假'
              }
              if (this.tableData[i].leaveType === '5') {
                this.tableData[i].leaveType = '婚假'
              }
              if (this.tableData[i].leaveType === '6') {
                this.tableData[i].leaveType = '病假'
              }
              this.tableData[i].aaa = this.tableData[i].leaveType
            }

            if (this.tableData[i].verifiedState === '0') {
              this.tableData[i].verifiedState = '承認待ち'
            }
            if (this.tableData[i].verifiedState === '1') {
              this.tableData[i].verifiedState = '承認済み'
            }
            if (this.tableData[i].verifiedState === '2') {
              this.tableData[i].verifiedState = '承認拒否'
            }
          }

          // console.log(this.tableData);
          this.total = res.data.data.total
        })
        .catch((error) => {
          console.log(error)
        })
    },
    openAddDialog() {
      this.addFormtijiao.beginTime = ''
      this.addFormtijiao.endTime = ''
      this.addForm.startTime = ''
      this.addForm.terminalTime = ''
      this.addDialogVisible = true
    },
    resetData() {
      this.addFormtijiao.beginTime = ''
      this.addFormtijiao.endTime = ''
      this.addForm.startTime = ''
      this.addForm.terminalTime = ''
      this.addFormtijiao.totalTimes = ''
      this.addFormtijiao.oliReason = ''
    },
    // 新增加班欠勤信息
    async saveovertimeleaveinfo() {
      if (this.addFormtijiao.oliFlag == '2') {
        if (this.addFormtijiao.leaveType === '') return this.$message.warning('休暇類別を選んでください')
      }
      if (this.addFormtijiao.beginTime === '' || this.addFormtijiao.beginTime === null) return this.$message.warning('開始期日を選んでください')
      if (this.addForm.startTime === '' || this.addForm.startTime === null) return this.$message.warning('開始時間を選んでください')
      if (this.addFormtijiao.endTime === '' || this.addFormtijiao.endTime === null) return this.$message.warning('終了期日を選んでください')
      if (this.addForm.terminalTime === '' || this.addForm.terminalTime === null) return this.$message.warning('終了時間を選んでください')
      if (this.addFormtijiao.oliReason === '') return this.$message.warning('理由を入力してください')
      this.addFormtijiao.beginTime = this.addFormtijiao.beginTime + ' ' + this.addForm.startTime
      this.addFormtijiao.endTime = this.addFormtijiao.endTime + ' ' + this.addForm.terminalTime
      if (this.addFormtijiao.totalTimes < 0 && this.addFormtijiao.totalTimes !== '') {
        // this.addDialogVisible = false
        return this.$message.warning('開始時間が終了時間を超えた')
      }
      console.log(this.addFormtijiao)
      this.axios
        .post('/overtimeleaveinfo/insert', this.addFormtijiao)
        .then((res) => {
          if (res.data.success !== 1) {
            return this.$messaxge.error(res.data.msg)
          }
          this.$message.success(this.$getMsg('I0001'))
          this.addDialogVisible = false
          this.getOvertimeAbsentItem()
        })
        .catch((error) => {
          console.log(error)
        })
    },

    // 編輯加班欠勤信息
    addEdit() {
      if (this.multipleSelection.length === 1) {
        this.qingjiachuanzhi.searchbean.lsName = ''
        console.log(this.qingjiachuanzhi)
        this.qingjialeixing()
        console.log(this.options2)
        this.id.oliGuid = this.multipleSelection[0].oliGuid
        if (this.addFormtijiao.totalTimes < 0) {
          this.addDialogVisible = false
          return this.$message.warning('開始時間が終了時間を超えた')
        }
        this.axios
          .post('/overtimeleaveinfo/select', this.id)
          .then((res) => {
            const tableData = res.data.data
            console.log(tableData)
            this.editFormtijiao.oliFlag = tableData[0].oliFlag
            this.editFormtijiao.beginTime = tableData[0].beginTime.substring(0, 10)
            this.editForm.startTime = tableData[0].beginTime.substring(11, 16)
            this.editFormtijiao.endTime = tableData[0].endTime.substring(0, 10)
            this.editForm.terminalTime = tableData[0].endTime.substring(11, 16)
            this.editFormtijiao.totalTimes = tableData[0].totalTimes
            this.editFormtijiao.oliReason = tableData[0].oliReason
            this.divTimebianji()
            if (tableData[0].leaveType == '1') {
              this.editFormtijiao.leaveType = ''
            } else {
              this.editFormtijiao.leaveType = tableData[0].leaveType
            }
          })
          .catch((error) => {
            console.log(error)
          })
        this.addDialogVisible1 = true
      } else {
        return this.$message({
          showClose: true,
          message: this.$getMsg('W0001'),
          type: 'warning'
        })
      }
    },

    // 刪除欠勤信息
    remove() {
      this.removeID.oliGuids = []
      this.multipleSelection.forEach((item) => {
        this.removeID.oliGuids.push(item.oliGuid)
      })
      console.log(this.removeID.oliGuids)
      if (this.multipleSelection.length === 0) {
        return this.$message({
          showClose: true,
          message: this.$getMsg('W0002'),
          type: 'warning'
        })
      }
      this.$confirm(this.$getMsg('I0004'), {
        cancelButtonText: 'キャンセル',
        confirmButtonText: '確認',
        type: 'warning'
      }).then(
        () => {
          this.axios
            .delete('/overtimeleaveinfo/delete', { data: this.removeID })
            .then((res) => {
              // console.log(res)
              if (res.data.success !== 1) {
                this.removeID.oliGuids = []
                return this.$message.error(res.data.msg)
              }
              this.$message.success(this.$getMsg('I0003'))
              this.removeID.oliGuids = []
              this.getOvertimeAbsentItem()
            })
            .catch((error) => {
              console.log(error)
            })
        },
        (res) => {
          console.log(res)
        }
      )
    },

    // 更新修改欠勤信息
    updata() {
      console.log(this.editFormtijiao)
      if (this.editFormtijiao.oliFlag == '2') {
        if (this.editFormtijiao.leaveType === '') return this.$message.warning('休暇類別を選んでください')
      }
      if (this.editFormtijiao.beginTime === '' || this.editFormtijiao.beginTime === null) return this.$message.warning('開始期日を選んでください')
      if (this.editForm.startTime === '' || this.editForm.startTime === null) return this.$message.warning('開始時間を選んでください')
      if (this.editFormtijiao.endTime === '' || this.editFormtijiao.endTime === null) return this.$message.warning('終了期日を選んでください')
      if (this.editForm.terminalTime === '' || this.editForm.terminalTime === null) return this.$message.warning('終了時間を選んでください')
      if (this.editFormtijiao.oliReason === '') return this.$message.warning('理由を入力してください')
      this.editFormtijiao.beginTime = this.editFormtijiao.beginTime + ' ' + this.editForm.startTime
      this.editFormtijiao.endTime = this.editFormtijiao.endTime + ' ' + this.editForm.terminalTime
      this.multipleSelection.forEach((item) => {
        this.editFormtijiao.oliGuid = item.oliGuid
      })
      if (this.editFormtijiao.totalTimes < 0) {
        this.addDialogVisible1 = false
        return this.$message.warning('開始時間が終了時間を超えた')
      }
      this.axios
        .put('/overtimeleaveinfo/update', this.editFormtijiao)
        .then((res) => {
          if (res.data.success !== 1) {
            this.editFormtijiao.beginTime = this.editFormtijiao.beginTime.slice(0, 10)
            this.editFormtijiao.endTime = this.editFormtijiao.endTime.slice(0, 10)
            return this.$message.error(res.data.msg)
          }
          this.$message.success(this.$getMsg('I0002'))
          this.addDialogVisible1 = false
          this.getOvertimeAbsentItem()
        })
        .catch((error) => {
          console.log(error)
        })
    },

    //计算合计小时数
    divTime() {
      this.addFormtijiao.totalTimes = ''
      var time1 = Date.parse(new Date(this.addFormtijiao.beginTime + ' ' + this.addForm.startTime))
      var time2 = Date.parse(new Date(this.addFormtijiao.endTime + ' ' + this.addForm.terminalTime))
      this.addFormtijiao.totalTimes = (time2 - time1) / 1000 / 3600
    },

    divTimebianji() {
      this.editFormtijiao.totalTimes = ''
      console.log(this.editFormtijiao.beginTime)
      console.log(this.editForm.startTime)
      console.log(this.editFormtijiao.endTime)
      console.log(this.editForm.terminalTime)
      var time1 = Date.parse(new Date(this.editFormtijiao.beginTime + ' ' + this.editForm.startTime))
      var time2 = Date.parse(new Date(this.editFormtijiao.endTime + ' ' + this.editForm.terminalTime))
      this.editFormtijiao.totalTimes = (time2 - time1) / 1000 / 3600
    },
    //点击开始日期，结束日期必须和开始日期一直
    endTimebianji() {
      this.addFormtijiao.endTime = this.addFormtijiao.beginTime
      this.addForm.terminalTime = ''
      this.addFormtijiao.totalTimes = ''
    },
    endTimebianji1() {
      this.editFormtijiao.endTime = this.editFormtijiao.beginTime
      this.editForm.terminalTime = ''
      this.editFormtijiao.totalTimes = ''
    },
    reset() {
      this.addFormtijiao.oliFlag = '1'
      this.addFormtijiao.beginTime = ''
      this.addForm.startTime = ''
      this.addFormtijiao.leaveType = ''
      this.addFormtijiao.endTime = ''
      this.addForm.terminalTime = ''
      this.addFormtijiao.totalTimes = ''
      this.addFormtijiao.oliReason = ''
      this.editFormtijiao.leaveType = ''
      this.editFormtijiao.beginTime = ''
      this.editForm.startTime = ''
      this.editFormtijiao.endTime = ''
      this.editForm.terminalTime = ''
      this.editFormtijiao.totalTimes = ''
      this.editFormtijiao.oliReason = ''
    }
  },
  // 頁面初加載
  created() {
    this.getOvertimeAbsentItem()
  }
}
</script>

<style scoped>
#overtimeabsent_container {
  height: 98%;
}
.overtimeabsent_container_card {
  width: 100%;
  background-color: #efefef;
  height: 85px;
}
.paddingOvertimeabsent_container {
  width: 100%;
  height: 80%;
  position: relative;
}
.paddingOvertimeabsent_container2 {
  width: 82%;
  float: left;
  line-height: 30px;
  padding-left: 8px;
  height: 100%;
}
.el-col1 {
  border-right: 0.5px solid rgb(228, 228, 228);
}

.el-input {
  border-radius: 4px;
  border: 4px 4px;
}
:deep(.el-select--medium) {
  width: 135px;
}
.marginDateBox {
  width: 16%;
  height: 60px;
  float: right;
  margin-top: 15px;
  position: absolute;
  right: 0;
}
.box {
  float: left;
  margin-left: 5px;
  margin-top: 4px;
  width: 20%;
  height: 80%;
  background-color: gray;
  text-align: center;
  line-height: 44px;
  font-weight: 800;
  color: #fff;
  font-size: 20px;
  border-radius: 8px;
}

/* 滚动条 */
.el-select-dropdown .scroll-opacity.el-scrollbar .el-scrollbar_bar.is-vertical {
  /* 改为0不显示滚动条 */
  opacity: 1;
}
.el-range-editor--mini .el-range-separator {
  line-height: 28px;
}
.box-card {
  margin-top: 6.5px;
  border-top: 2px solid rgb(232, 232, 240);
}
:deep(.el-range-editor--medium.el-input__inner) {
  width: 310px;
}
.datebox {
  width: 100%;
  height: 60px;
}
.leaveselect {
  width: 310px;
}
.timeselect {
  width: 180px;
}
.divridio {
  width: 655px;
}
.formcontent {
  height: 300px;
}
:deep(.diaOvertime) {
  min-width: 700px;
  width: 39%;
}
.mytable .mytr td:nth-child(2) {
  padding-left: 15px;
}
</style>
